<template>
	<view class="level_box">
		<view class="top_box">
			<view class="img_box">
				<view class="img_box_li">
					<image class="touxiang_img" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/dHkrhsgLUN_logo_icon.jpg" mode=""></image>
					<view class="level_txt">V{{userLevel===9 ? 9 : userLevel}}</view>
				</view>
			</view>
			<view class="treim_box">团队交易额：{{teamAmount||0}}万</view>
			<view class="points_box">积分政策：万{{pointsProportion||0}}</view>
			<view class="level_list_box my-pdl-15">
				<view class="level_li" v-for="(item,index) in 9" :key="index">
					<view class="level_bor"
					:class="index <= (userLevel-1)?'level_bor_orig':'level_bor_gray'"
					>
						V{{index + 1}}
					</view>
					<view class="hengxian" v-if="index !==8"
					:class="index<=(userLevel-1)?'bg_orig':'bg_gray'"
					></view>
				</view>
			</view>
			<view class="difference_li">差{{differenceAmount||0}}交易额到V{{userLevel===9?'9': userLevel + 1}}，新特权即将开启</view>
		</view>
		<view class="details_box">
			<view class="bor_bg_col"></view>
			<view class="bor_txt">等级详情</view>
			<view class="bor_bg_col"></view>
		</view>
		<view class="table_box">
			<view class="th">
				<view class="th_li" style="width: 38%;">交易量</view>
				<view class="th_li" style="width: 22%;">对应等级</view>
				<view class="th_li" style="width: 20%;">晋升条件</view>
				<view class="th_li" style="width: 20%;">积分政策</view>
			</view>
			<view class="td" :class="t % 2==0?'td_li_bg':''" v-for="(i,t) in dev" :key="t">
				<view class="td_li" style="width: 38%;">
					<text v-if="t===0">{{'＜'+ dev[t +1].levelAmount +'万'}}</text>
					<text v-if="t===1||t===2||t===3||t===4||t===5||t===6||t===7">{{dev[t].levelAmount +'万'}} ≤ X＜{{dev[t +1].levelAmount +'万'}}</text>
					<text v-if="t===8">{{'≥' + dev[t].levelAmount +'万'}}</text>
				</view>
				<view class="td_li" style="width: 22%;">{{i.vipName}}</view>
				<view class="td_li" style="width: 20%;">
					<text v-if="i.nextLevelVipConfigList.length > 0">{{i.nextLevelVipConfigList[0].vipNumber}}个直属{{i.nextLevelVipConfigList[0].vipName}}</text>
					<text v-else>无</text>
				</view>
				<view class="td_li" style="width: 20%;">万{{i.proportion}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {levelInfoApi} from "@/api/myinter.js"
	export default {
		data() {
			return {
				differenceAmount:0,//差下一等级金额
				pointsProportion:0,//积分比例
				teamAmount:0,//团队交易额
				userLevel:'',//用户等级
				dev:[],
			};
		},
		onLoad() {
			this.getLevelInfo()
		},
		methods:{
			async getLevelInfo(){
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await levelInfoApi({})
				if(res.statusCode ===200){
					uni.hideLoading()
					this.differenceAmount = res.data.data.differenceAmount
					this.pointsProportion = res.data.data.pointsProportion
					this.teamAmount = res.data.data.teamAmount
					let vip = res.data.data.userLevel
					if(vip==='VIP2'){
						this.userLevel = 2
					}else if(vip==='VIP3'){
						this.userLevel = 3
					}else if(vip==='VIP4'){
						this.userLevel = 4
					}else if(vip==='VIP5'){
						this.userLevel = 5
					}else if(vip==='VIP6'){
						this.userLevel = 6
					}else if(vip==='VIP7'){
						this.userLevel = 7
					}else if(vip==='VIP8'){
						this.userLevel = 8
					}else if(vip==='VIP9'){
						this.userLevel = 9
					}else{
						this.userLevel = 1
					}
					this.dev = res.data.data.vipInfo
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.level_box{
		width: 100%;
		background: #FFFFFF;
		.top_box{
			width: 100%;
			height: 431rpx;
			background: linear-gradient(45deg, #DA9C19 0%, #E0B655 100%);
			.img_box{
				width: 100%;
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.img_box_li{
					width: 130rpx;
					height: 130rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.touxiang_img{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.level_txt{
						width: 45rpx;
						height: 45rpx;
						line-height: 45rpx;
						text-align: center;
						background: #FFC51E;
						border: 3rpx solid #FFC51E;
						border-radius: 50%;
						font-size: 30rpx;
						font-family: STFangsong;
						font-weight: 400;
						color: #FFFFFF;
						position: absolute;
						top: 75rpx;
						left: 75rpx;
					}
				}
			}
			.treim_box,.points_box,.difference_li{
				width: 100%;
				height: 50rpx;
				text-align: center;
				font-weight: 500;
				color: #FFFFFF;
			}
			.treim_box{
				font-size: 30rpx;
				line-height: 50rpx;
			}
			.difference_li{
				font-size: 22rpx;
				line-height: 50rpx;
			}
			.points_box{
				font-size: 24rpx;
				line-height: 40rpx;
			}
			.level_list_box{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				.level_li{
					display: flex;
					align-items: center;
					.level_bor{
						width: 55rpx;
						height: 55rpx;
						line-height: 45rpx;
						text-align: center;
						border-radius: 50%;
						font-size: 30rpx;
						font-family: STFangsong;
						font-weight: 400;
						color: #FFFFFF;
					}
					.level_bor_orig{
						border: 3px solid #FFE594;
						background: #FFC51E;
					}
					.level_bor_gray{
						border: 3px solid #F5F3F4;
						background: #D9D9D9;
					}
					.hengxian{
						width: 27rpx;
						height: 4rpx;
					}
					.bg_orig{
						background: #FFC51E;
					}
					.bg_gray{
						background:  #D9D9D9;
					}
				}
			}
		}
		.details_box{
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.bor_bg_col{
				width: 30rpx;
				height: 1rpx;
				background: #DA9D1B;
			}
			.bor_txt{
				width: 180rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #DA9D1B;
			}
		}
		.table_box{
			width: 100%;
			height: auto;
			min-height:120rpx;
			.th,.td{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				.th_li,.td_li{
					height: 100%;
					font-weight: 400;
					text-align: center;
					line-height: 70rpx;
				}
				.th_li{
					font-size: 28rpx;
					color: #000000;
				}
				.td_li{
					font-size: 24rpx;
					color: #666666;
				}
			}
			.td_li_bg{
				background: #FFFAEA;
			}
		}
	}
</style>